<template>
  <!-- 材料压缩包 子页面 -->
  <div class="Z_P_box">
    <!-- nvabar -->
    <ZipTitleNavbar />
    <!-- 面板 -->
    <ZipPanel />
    <!-- 背景 -->
    <div class="top_bac"></div>
    <!-- 文件列表 -->
    <div class="list_box">
      <ProfileItem v-for="item in [0, 1, 2, 3, 4, 5]" :key="item" />
    </div>
  </div>
</template>

<script>
import ZipTitleNavbar from "./component/ZipTitleNavbar.vue";
import ZipPanel from "./component/ZipPanel.vue";
import ProfileItem from "../component/ProfileItem.vue";
export default {
  components: { ZipTitleNavbar, ZipPanel, ProfileItem },
};
</script>

<style lang="less" scoped>
.Z_P_box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .top_bac {
    width: 100%;
    height: 12rem;
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F25%2F20200425173132_svsej.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659688301&t=aa0628bbd3f8a222fe3fc8e716b84b02);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .list_box {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
    padding: 0 0.5rem;
    padding-top: 2.5rem;
    box-sizing: border-box;
  }
}
</style>
